import React, { Component, ReactNode } from 'react'
import TableList from '@/components/TableList';
import { Button, Card, Loading} from '@alifd/next';
import Pagination from '@/components/Pagination';
import { getCouponCodeList } from '@/api/coupon';
import { changePrice} from '@/utils/help';
import { ticketTypeEnum, ticketStatusEnum} from '@/models/interface/promotion';
interface Props {}
interface State {
  dataSource: any,
  total: number,
  pageNum: number,
  visible: boolean,
}
  // const getRequest: any = useRequest(getCouponCodeList)
class CouponCodeList extends Component<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      dataSource: [],
      total: 0,
      pageNum: 1,
      visible: false,
    }
  }

  // 数据列表
  getList = async () => {
    this.setState({
      visible: true,
    })
    const { code, result }: any = await getCouponCodeList({
      pageNum: this.state.pageNum,
      pageSize: 20,
    });
    if (!code) {
      this.setState({
        dataSource: result.data.map((item) => {
          return {
            ...item,
            couponCodeTypeName: ticketTypeEnum[item.couponCodeType],
            restrictMoneyMoney: changePrice(item.restrictMoneyMoney),
            couponCodeStatusName: ticketStatusEnum[item.couponCodeStatus],
          }
        }),
        total: result.total,
        visible: false,
      });
    }
  }
  componentWillMount(){
    this.getList();
  }
  // 优惠券面额
  couponPrice = (...args: any[]) => {
    return <div>
      {args[2].couponCodeType === 1 || args[2].couponCodeType === 3 ? changePrice(args[2].discountMoneyMoney) : args[2].discountRate * 100 * 10 / 100 + '折'}
    </div>
  }
  // 操作
  setCell = (...args: any[])=>{
    return <Button
        text
        type="primary"

      >
        编辑
      </Button>
  }
  // 分页
  pageChange = (val: number) => {
    this.setState({
      pageNum: val,
    });
    this.getList();
  }
  couponCodeTable = [
    {
      key: '1',
      title: '优惠码名称',
      dataIndex: 'couponCode',
      width: 120,
    },
    {
      key: '2',
      title: '优惠码类型',
      dataIndex: 'couponCodeTypeName',
      width: 120,
    },
    {
      key: '3',
      title: '优惠码面额/折扣',
      render: this.couponPrice,
      width: 120,
    },
    {
      key: '4',
      title: '使用条件',
      dataIndex: 'restrictMoneyMoney',
      width: 120,
    },
    {
      key: '5',
      title: '有效次数',
      dataIndex: 'couponCodeNum',
      width: 120,
    },
    {
      key: '6',
      title: '已使用次数',
      dataIndex: 'usedNum',
      width: 120,
    },
    {
      key: '7',
      title: '有效期',
      dataIndex: 'startTime',
      dataIndex1: 'endTime',
      type: 'times',
      width: 160,
    },
    {
      key: '8',
      title: '状态',
      dataIndex: 'couponCodeStatusName',
      width: 100,
    },
    {
      key: '9',
      title: '创建时间',
      dataIndex: 'createTime',
      type: 'time',
      width: 160,
    },
    {
      key: '10',
      title: '创建人',
      dataIndex: 'creatorName',
      width: 100,
    },
    {
      key: '11',
      title: '操作',
      render: this.setCell,
      width: 120,
    },
  ]

  render(): ReactNode {
    return (
      <Loading tip="加载中..." visible={this.state.visible} >
      <Card free>
          <Card.Content>
            <TableList
              columns={this.couponCodeTable}
              dataSource={this.state.dataSource}
            />
            <Pagination
              total={this.state.total}
              pageNum={this.state.pageNum}
              pageChange={this.pageChange}
            />
          </Card.Content>
        </Card>
    </Loading>
    )
  }
}

export default CouponCodeList
